*{

    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}


:root {
    --blue: #1e90ff;
    --white: #ffffff;
  }


  /* *************************  CSS FOR HEADR SECTION START ************************** */
  /* .tophed{


    display: flex;
} */




/********************************** CSS FOR HEADR SECTION CLOSE ************************************** */






/*************************************** css start for sidebaar *********************************** */

.main-logo{



     padding: 3px;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 35px;
     background-color: white;
     box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}




/* .sidebaar-middle-content{

    margin-top: 17px;
} */
/* .sidebaar-middle-content{

    background-color: #6cb0ff;
} */


/************************************** css close for sidebaar ************************************** */



/************************** css for main content start ****************************** */

.main-container-box {
    display: flex;
}

.main-content-box {
    /* padding-left: 51px; */
    /* padding-right: 51px; */
    /* padding-top: 90px; */
    background-color: red;
    /* width: 30%; */

    padding: 100px;
    /* margin-left: 6%; */

    padding-bottom: 51px;
}

.punc-box{

    /* border: 1px solid black; */

     /* margin: auto; */
     width: fit-content;

     /* background-color: #fff; */
     box-shadow: 0 2px 4px rgba(126, 142, 177, .12);
    text-align: center;

     background-color: white;
     /* height: 130px; */
    padding: 10px;
    border-radius: 10px;

    width: 130px;

}

.punc-box > .h11{

    font-size: 19px;
    font-family: 600;
}

.in{

border-bottom: 1px solid #ddd9d9;

padding-bottom: 8px;
}

.totday-text-punches{

 padding-top: 8px;

 font-size: 12px;
}


.h22{

    font-size: 34px;
    font-family: 600;
    border-bottom: 1px solid #ddd9d9;
padding-bottom: 8px;

}


.main-hed-content{

    font-size: 15px;
    font-weight: 700;
    color: #3e4b5b;
    position: relative;

}

.main-hed-content::after{
    content: "";
    position: absolute;
    bottom: -90%;
    height: 5px;
    left: 0;
    width: 10%;
    font-size: 15px;
    font-weight: 700;
    color: #1e90ff;
    background: #1e90ff;
    /* position: relative; */
}

.attendance-cirel{
    height: 120px;
    width: 120px;
    background-color: #1e90ff;
    border-radius: 100%;
    position: relative;
}

.attendance-cirel::before{
 content: "";
 position: absolute;
 width: 2px;
 height: 50%;
 background-color: #ffffff;
 top: 0;
 left: 50%;

}




/* color box  */

.color1{
    height: 10px;
    width: 40px;
    color: red;
    background-color: #00ce8c;
}

.color2{
    height: 10px;
    width: 40px;
    color: red;
    background-color: #1984ff;
}
/* 2  */

.color3{
    height: 10px;
    width: 40px;
    color: red;
    background-color: #fc7979;
}

/* 3 */

.color4{
    height: 10px;
    width: 40px;
    color: red;
    background-color: #5bc0de;
}

/* 4 */

.color5{
    height: 10px;
    width: 40px;
    color: red;
    background-color: red;
}
/* color box  */

.attend-box{
    display: flex;
    text-align: center;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
}

.attend-box >.div-text{
font-size: 12px;
/* padding-bottom: 13px; */

}

.attend-box > .color1{
    /* font-size: 12px; */
    padding-bottom: 13px;

}

/* icon for app  */

.iconforapp{
    font-size: 58px;
    font-weight: bold;
}

.pandorid{
    /* border: 1px solid ; */
        border-top: 1px solid #ddd9d9;
}


.datebox{
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 15px;
    margin-top: 20PX;
}

.inner-tils{
    /* border: 1px solid black; */
    background-color: #fff;
    text-align: center;
    box-shadow: 0 2px 4px rgba(126, 142, 177, .12);
    padding: 20px;
}

.webcheckin{
    display: flex;
    align-items: center;
    justify-content: first baseline;
    font-size: 14px;
    font-weight: 600;

}


.fa-calendar-days{
    font-size: 16px;
    font-weight: 600;
}

#current-date{
    font-size: 16px;
    font-weight: 600;
}



#current-time{
    font-size: 16px;
    font-weight: 600;
}

.checkinbutton{
    width: 100%;
    margin-top: 7px;
    padding: 3px;
}


.main-hed1{
    display: flex;
    justify-content: space-between;
}

.inner-tils1{
    background-color: #fff;
    /* text-align: center; */
    box-shadow: 0 2px 4px rgba(126, 142, 177, .12);
    padding: 20px;

}

.tils2{
    height: 200px;
}

.login-main-box{
    width: 40%;
    border: 1px solid #cfcfcf;
    /* display: grid;
    place-items: center; Center both horizontally and vertically */
    /* height: 100vh; Full viewport height */
    /* box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); */
    padding: 20px;
    border-radius: 2%;
    background: #cae0f2;
}

.manilogin{
    display: grid;
    place-items: center; /* Center both horizontally and vertically */
    height: 100vh;
}


.main-loginbutton{

    width: 100%;
}


.registration-restpass{

    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.registration-restpass > .div1 > a{


    color: rgb(97, 182, 227);


    font-size: 15px;

    font-size: 15px;
    font-weight: 500;

}


.registration-restpass > .div2 > a{


    color: rgb(97, 182, 227);
    font-size: 15px;

    font-size: 15px;
    font-weight: 500;

}


.main-loginbutton{
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,120,121,0.7904411764705882) 35%, rgba(0,212,255,1) 100%);

    color: white;

    padding: 8px;

    border-radius: 10px;

    border: none !important;
}

a > .punc-box > .h11{

    color: black;

    font-size: 22px;

}

.employee-anchor{

    text-decoration: none !important;
}

a > .punc-box > p{

    color: black !important;

}

.admin1{

    color: black;
    font-size: 24px;
}

.top-bar-div{
    background: #fff;
    padding: 3%;
}

.organization-input{
  width: 50% !important;
  padding: 15px !important;
}

.organization-view{

    padding: 10px;
}

.organization-button{

    padding: 10px 10px;


    border: 1px solid black;


}

.more-fillter{



    display: flex;
    justify-content: space-between;
}

.more-fillter > button {
    /* border: 1px solid black; */
    /* margin-right: 97px !important; */
    /* float: right; */
    margin-left: 80%;
    padding: 10px 13px;
}


.inviteemployee{


    padding: 12px !important;
    font-size: 16px;
}

/************************* css main content close ********************************** */


/* css for pop box start    */
.modal {
    --bs-modal-width: 60% !important;
    padding: 30px !important;

}


.employee-main-form{

    padding: 15px 8px !important;

    /* font-size: 12px !important; */

    border-radius: 0% !important;
    /* border: 1px solid red; */
}

label {
    color: #454444c4 !important;
    font-size: 14px !important;
}


.modal-content {

    padding: 20px;

}
/* css for pop box close  */



/* employee basic page css start  */

.emp-pro-img > img{


    width: 90px;
}


.emp-pro-img{

    display: flex;
    align-items: center;
    text-align: center;
}

.profile-top-box1 > .row > .col-md-8 > .name{


    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 15px;
}

.employee-profile-box{

    background-color: white;
    padding: 10px;
}

.profile-top-box1 > .row > .col-md-8 > .name > h2{

    font-size: 20px;
    font-weight: 500;
}

.employee1-code > .employee-code{


    background-color: #17a2b8;
    font-size: 12px;
    font-weight: 400;
    color: white;

    padding: 2px 8px;

    border-radius: 20px;

}

.employee1-code > .status{

    background-color: #00ce8c;
    font-size: 12px;
    font-weight: 400;
    color: white;

    padding: 2px 8px;

    border-radius: 20px;
}


.profile-top-box2 > ul{
    display: inline-flex;
    padding-left: 0px !important;

     margin-top: 10px;
}

.profile-top-box2 > ul > li {
    font-size: 14px;
    padding: 3px 9px;
    list-style: none;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(0, 0, 0, .28);
}

.profile-top-box2 > ul > li > .foter-hed{

  font-weight: 700;
  color: #3e4b5b;
}


.instructionbtn{

    float: right !important;

    font-size: 13px  !important;
    margin-top: 5px;
}

.employee-profile-box > .row > .col-md-1{

    display: flex;
    align-items: center;
    justify-content: center;


}

.employee-profile-box{


    box-shadow: 0 2px 4px rgba(126, 142, 177, .12);

    padding: 1rem;
    border-radius: 6px;

}



/* employee basic page css close  */


/***************************** meddle section css start ******************* */


.menu-sidebaar{

    /* border: 1px solid  black;
     */

     background-color: white;
     box-shadow: 0 2px 4px rgba(126, 142, 177, .12);
     border-radius: 8px;

     /* padding: 2px; */

     /* padding: 10px; */


}

.menu-sidebaar > ul > li > a{


    /* color: black; */
    color: #575962;
    padding: .70rem;
    text-decoration: none;
    display: inline-block;
    width: 100%;

    font-size: 14px;
    font-weight: 500;
    text-decoration: none;


}

.menu-sidebaar > ul  {


    padding-left: 0px  !important;

}

.menu-sidebaar > ul > li {

    list-style: none;

    border-bottom: 1px solid #ced4da;
}

.middle-section{

    margin-top: 3rem;
}

.menu-sidebaar > ul > li > a > span{

    float: right;


}



.menu-sidebaar > ul > li:hover{

    background-color: #ced4da;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.menu-sidebaar > ul > li:hover a{


    color: white;
}

.menu-sidebaar > ul > .active{

    background-color: #ced4da;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.menu-sidebaar > ul > .active > a{

    color: white;

}



.main-middle-section-box{

    background-color: white;
    box-shadow: 0 2px 4px rgba(126, 142, 177, .12);
    border-radius: 8px;
    padding: 2rem;

}

.top-hed{

    padding: 20px 0px ;

    /* border-bottom: 1px solid rgb(135, 131, 131); */

}


.form-control {

    color: #454444c4 !important;
    font-size: 14px !important;
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, 50px) !important;
}


 /********** login page css start   ************** */

.main-background-image{

/* background-image: url(../image/admin/login-img.png); */
background-image: url(../image/admin/login-background-image.png);
}


.login-img > img{

 height: 80px;
 width: 220px;

}

/***************** login page css close *********************** */
/***************************** meddle section css close ******************* */